<!DOCTYPE html>
<html>
<head>
	<title></title>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/layer/layer.js"></script>
<script src="__PUBLIC__/js/jquery.luara.0.0.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/qh_goods.css">
</head>
<body>
	<div class="qh_header">
		<div class="qh_header_login">您好，欢迎来到灷窍乾商城！</div>
	</div>
	<div class="qh_search">

			<img src="__PUBLIC__/home/images/goods/goods_logo.png" class="qh_search_logo">
			<input type="text" name="name" id = "name" style="margin-left:355px">
			<button onClick="xxxx();">搜&nbsp;索</button>
		
			<a href="{:U('Goods/index')}" style="width:140px"><img src="__PUBLIC__/home/images/goods/classify.png" style="width:16px;height:16px;margin-bottom:5px;">&nbsp;&nbsp;全部分类</a>
	<script>
	function xxxx(){

	var name=$('#name').val();
	if(name != ""){
		location.href="/Goods/goods_list/name/"+name;
	}else{
		location.href="/Goods/goods_list";
	}

	}
	</script>		
	</div>

	<!-- //////////////////////////////////////////////////////////////////////////////////////// -->
		
	
	<div class="qh_both">
		<div class="qh_both_left">
			<div class="qh_both_left_title">产品中心</div>
			<ul>
			<volist name="gc" id="vo">
				<li><a href="{:U('Goods/goods_list',array('id'=>$vo['id']))}">{$vo.name}<span>></span></a></li>
			</volist>
			</ul>
		</div>
		<div class="qh_both_right">
			    <div class="qh_goods">
					<div class="qh_goods_title">
						<div class="qh_goods_title_classify">
							<span>首页>产品中心>{$category}</span>
						</div>
						<div class="qh_goods_title_border"></div>
					</div>
					
					<div class="qh_goods_content" style="background:white;">
						<div class="qh_goods_content_left">
							<!-- <img src="/Public/Home/images/goods/goods.png" class="qh_goods_content_left_big"> -->


<style type="text/css">

/* reset */
ul,ol,li{margin:0;padding:0;}
.preview{width:400px; height:465px;}

/* smallImg */

.smallImg{position:relative; height:52px; margin-top:1px; background-color:#F1F0F0; padding:6px 5px; width:390px; overflow:hidden;float:left;}

.scrollbutton{width:14px; height:50px; overflow:hidden; position:relative; float:left; cursor:pointer; }

.scrollbutton.smallImgUp , .scrollbutton.smallImgUp.disabled{background:url(../../../../Public/Home/images/goods/left.png) no-repeat;}

.scrollbutton.smallImgDown , .scrollbutton.smallImgDown.disabled{background:url(../../../../Public/Home/images/goods/right.png) no-repeat; margin-left:375px; margin-top:-50px;}



#imageMenu {height:50px; width:360px; overflow:hidden; margin-left:0; float:left;}

#imageMenu li {height:50px; width:60px; overflow:hidden; float:left; text-align:center;}

#imageMenu li img{width:50px; height:50px;cursor:pointer;}

#imageMenu li#onlickImg img, #imageMenu li:hover img{ width:44px; height:44px; border:3px solid #959595;}

/* bigImg */

.bigImg{position:relative; float:left; width:400px; height:400px; overflow:hidden;}

.bigImg #midimg{width:400px; height:400px;}

.bigImg #winSelector{width:235px; height:210px;}

#winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; border:1px solid #fff;}

/* bigView */

#bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999;}

#bigView img{position:absolute;}

</style>
<div class="preview">

	<div id="vertical" class="bigImg">

		<img src="{$list.pic}" width="400" height="400" alt="" id="midimg" />

		<div style="display:none;" id="winSelector"></div>

	</div><!--bigImg end-->	

	<div class="smallImg">

		<div class="scrollbutton smallImgUp disabled"></div>

		<div id="imageMenu">

			<ul>

				<li id="onlickImg"><img src="{$list.pic}" width="68" height="68"/></li>
<!--
				<li><img src="/Public/Home/images/goods/goods.png" width="68" height="68"/></li>

				<li><img src="/Public/Home/images/goods/details.png" width="68" height="68"/></li>

				<li><img src="/Public/Home/images/goods/details.png" width="68" height="68"/></li>

				<li><img src="/Public/Home/images/goods/details.png" width="68" height="68"/></li>

				<li><img src="/Public/Home/images/goods/details.png" width="68" height="68"/></li>

				<li><img src="/Public/Home/images/goods/details.png" width="68" height="68"/></li>-->

			</ul>

		</div>

		<div class="scrollbutton smallImgDown"></div>

	</div><!--smallImg end-->	

	<div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="" /></div>

</div>
<script type="text/javascript">

$(document).ready(function(){

	// 图片上下滚动

	var count = $("#imageMenu li").length - 5; /* 显示 6 个 li标签内容 */

	var interval = $("#imageMenu li:first").width();

	var curIndex = 0;

	

	$('.scrollbutton').click(function(){

		if( $(this).hasClass('disabled') ) return false;

		

		if ($(this).hasClass('smallImgUp')) --curIndex;

		else ++curIndex;

		

		$('.scrollbutton').removeClass('disabled');

		if (curIndex == 0) $('.smallImgUp').addClass('disabled');

		if (curIndex == count-1) $('.smallImgDown').addClass('disabled');

		

		$("#imageMenu ul").stop(false, true).animate({"marginLeft" : -curIndex*interval + "px"}, 600);

	});	

	// 解决 ie6 select框 问题

	$.fn.decorateIframe = function(options) {

        /*if ($.browser.msie && $.browser.version < 7) {

            var opts = $.extend({}, $.fn.decorateIframe.defaults, options);

            $(this).each(function() {

                var $myThis = $(this);

                //创建一个IFRAME

                var divIframe = $("<iframe />");

                divIframe.attr("id", opts.iframeId);

                divIframe.css("position", "absolute");

                divIframe.css("display", "none");

                divIframe.css("display", "block");

                divIframe.css("z-index", opts.iframeZIndex);

                divIframe.css("border");

                divIframe.css("top", "0");

                divIframe.css("left", "0");

                if (opts.width == 0) {

                    divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");

                }

                if (opts.height == 0) {

                    divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");

                }

                divIframe.css("filter", "mask(color=#fff)");

                $myThis.append(divIframe);

            });

        }*/

    }

    $.fn.decorateIframe.defaults = {

        iframeId: "decorateIframe1",

        iframeZIndex: -1,

        width: 0,

        height: 0

    }

    //放大镜视窗

    $("#bigView").decorateIframe();

    //点击到中图

    var midChangeHandler = null;

	

    $("#imageMenu li img").bind("click", function(){

		if ($(this).attr("id") != "onlickImg") {

			midChange($(this).attr("src").replace("small", "mid"));

			$("#imageMenu li").removeAttr("id");

			$(this).parent().attr("id", "onlickImg");

		}

	}).bind("mouseover", function(){

		if ($(this).attr("id") != "onlickImg") {

			window.clearTimeout(midChangeHandler);

			midChange($(this).attr("src").replace("small", "mid"));

			$(this).css({ "border": "3px solid #959595" });

		}

	}).bind("mouseout", function(){

		if($(this).attr("id") != "onlickImg"){

			$(this).removeAttr("style");

			midChangeHandler = window.setTimeout(function(){

				midChange($("#onlickImg img").attr("src").replace("small", "mid"));

			}, 1000);

		}

	});

    function midChange(src) {

        $("#midimg").attr("src", src).load(function() {

            changeViewImg();

        });

    }

    //大视窗看图

    function mouseover(e) {

        if ($("#winSelector").css("display") == "none") {

            $("#winSelector,#bigView").show();

        }

        $("#winSelector").css(fixedPosition(e));

        e.stopPropagation();

    }

    function mouseOut(e) {

        if ($("#winSelector").css("display") != "none") {

            $("#winSelector,#bigView").hide();

        }

        e.stopPropagation();

    }

    $("#midimg").mouseover(mouseover); //中图事件

    $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件



    var $divWidth = $("#winSelector").width(); //选择器宽度

    var $divHeight = $("#winSelector").height(); //选择器高度

    var $imgWidth = $("#midimg").width(); //中图宽度

    var $imgHeight = $("#midimg").height(); //中图高度

    var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度



    function changeViewImg() {

        $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));

    }

    changeViewImg();

    $("#bigView").scrollLeft(0).scrollTop(0);

    function fixedPosition(e) {

        if (e == null) {

            return;

        }

        var $imgLeft = $("#midimg").offset().left; //中图左边距

        var $imgTop = $("#midimg").offset().top; //中图上边距

        X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X

        Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y

        X = X < 0 ? 0 : X;

        Y = Y < 0 ? 0 : Y;

        X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;

        Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;



        if ($viewImgWidth == null) {

            $viewImgWidth = $("#bigView img").outerWidth();

            $viewImgHeight = $("#bigView img").height();

            if ($viewImgWidth < 200 || $viewImgHeight < 200) {

                $viewImgWidth = $viewImgHeight = 800;

            }

            $height = $divHeight * $viewImgHeight / $imgHeight;

            $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);

            $("#bigView").height($height);

        }

        var scrollX = X * $viewImgWidth / $imgWidth;

        var scrollY = Y * $viewImgHeight / $imgHeight;

        $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });

        $("#bigView").css({ "top": 75, "left": $(".preview").offset().left + $(".preview").width() + 15 });



        return { left: X, top: Y };

    }

});

</script>
<script>
function add(){
		var num = $("#buy_num").html();
		
		if(num == ''){
			num = 0;
		}
		num = Number(num);

		var num_now = num+1;
		$("#buy_num").html(num_now);
	}
	function subxxx(){
		
		var num = $("#buy_num").html();
	
		if(num == ''){
			num = 0;
		}
		num = Number(num);

		var num_now = Math.max( num-1,0 );
		//alert(num_now);
		$("#buy_num").html(num_now);


	}
</script>

						</div>
						<div class="qh_goods_content_right">
							<p class="qh_goods_content_right_p1">{$list.name}</p>
							<p class="qh_goods_content_right_p2">{$list.miaoshu}</p>
							<div class="qh_goods_content_right_price">

								
							<p>商城售价：￥<span>{$list.all_money}</span></p>
								<p>会员价格：￥<span>{$list.money}</span></p>
								

							</div>
							<p class="qh_goods_content_right_p3">商品规格：<span>{$list.guige}</span></p>
							<div class="qh_goods_content_right_number">数量：&nbsp;
								<button onClick="subxxx();">-</button>&nbsp;
								<div class="qh_goods_content_right_number_div" id="buy_num">1</div>&nbsp;
							
								<button onClick="add();">+</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span>库存剩余：<span>{$list.shengyu_num}件</span></span>
							</div>
							<a class="qh_goods_content_right_a1" onClick="buy_cart();">加入购物车</a>
							<a class="qh_goods_content_right_a2" onClick="buy_lig();">立刻购买</a>
						</div>
					</div>
	<!--	href="{:U('Goods/cart')}" -->
					<div class="qh_goods_xiangqing">
						<div class="qh_goods_xiangqing_title">
							<img src="/Public/Home/images/goods/classify.png">&nbsp;&nbsp;<span>商品详情</span>
						</div>
						<div class="qh_goods_xiangqing_content">
							{$list.content}
						</div>
					</div>
				</div>
		

<script>
function buy_cart(){

		var num = $("#buy_num").html();
		var id={$list.id};
	
		var url="{:U('Goods/add_cart')}";
		$.post(url,{'num':num,'id':id},function(data){
			alert(data.info);
			if(data.status == 1){
				window.location.href="{:U('Goods/cart')}";
			}
		});
}
function buy_lig(){
	var num = $("#buy_num").html();
	var id={$list.id};
	window.location.href="{:U('Goods/lig')}?id="+id+"&num="+num;

}
</script>
		</div>
</div>



<div class="qh_footer">Copyright 2017-2018 All  灷窍乾 商城 版权所有</div>
</body>
</html>